<script setup lang="ts">
import { reactive, ref } from "vue";
import { numberApi } from "@/api/controller";
import { parseTime } from "@/utils/index";
import { ToastError, Toastloading } from "@/utils/public";
import forbidUserForm from './forbidUserForm.vue';
import { userStore } from '@/pinia/modules/user'
const useUserStore = userStore();
const { oss_url } = useUserStore
const $emit = defineEmits(["updateList"]);
const formRef = ref();
const action = reactive({
  dialogFormVisible: false,
  list: [],
});
const form = reactive({
  user_id:'',
  uuid:'',
  guid:''
});
const formRules = {};
const operateTypeFilter = (operateType: number) => {
  const operateTypeMap = ["正常", "已封号"];
  return operateTypeMap[operateType];
};
const handleSubmit = () => {
  closeDialog()
};
const handleForbid = (type=1) => {
  formRef.value.openDialog({
    ...form,
    operate_type:type
  })
};
// 下载
const uploadImg = (e: string | any[])=> {
  if(Array.isArray(e) && e.length > 0) {
    for(let i in e) {
      setTimeout(() => {
        if(e[i])uploadImgClick(oss_url + e[i]);
       }, (Number(i) + 1) * 1000);
    }
  }else {
    ToastError('资源为空!')
  }
}
const uploadImgClick = (e: string)=> {
  let a = document.createElement("a"); //创建一个<a></a>标签
  a.href = e; 
  a.style.display = "none"; 
  document.body.appendChild(a); // 将a标签追加到文档对象中
  a.click();
  a.remove();
}
const getList = async () => {
  const loading = Toastloading();
  let res = await numberApi.forbidList(form.user_id);
  loading.close();
  action.list = res.data;
};
const updateChange = ()=>{
  getList()
  $emit("updateList");
}
const openDialog = async (query: any = {}) => {
  const { user_id, uuid, guid } = query;
  form.user_id = user_id
  form.uuid = uuid;
  form.guid = guid;
  await getList();
  action.dialogFormVisible = true;
};
const closeDialog = () => {
  action.dialogFormVisible = false;
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="8vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="封号日志"
      width="70%"
    >
      <div class="labelBox justify-end xm-mb10">
          <el-button type="danger" v-rule="'number_handleforbid'" @click="handleForbid(1)">封号</el-button>
          <el-button
            v-rule="'number_deblocking'"
            type="primary"
            @click="handleForbid(0)"
            >解封</el-button
          >
      </div>
      <el-table :data="action.list" border>
        <el-table-column label="操作人" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.users.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="UUID" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.uuid }}</span>
          </template>
        </el-table-column>
        <el-table-column property="operate_type" label="状态" align="center">
          <template #default="scope">
            <el-tag>{{ operateTypeFilter(scope.row.operate_type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="原因类型"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.user_block_rule.name">{{
              scope.row.user_block_rule.name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          property="operate_info"
          label="操作说明"
          align="center"
        />
        <el-table-column label="封号时长" align="center">
          <template #default="scope">
            <span v-if="scope.row.block_time">
              {{ parseTime(scope.row.block_time,"{y}-{m}-{d} {h}:{i}") }}
            </span>
            <span v-if="!scope.row.block_time">永久</span>
          </template>
        </el-table-column>
        <el-table-column label="日期" align="center">
          <template #default="scope">
            {{ parseTime(scope.row.operate_time,"{y}-{m}-{d} {h}:{i}") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" @click="uploadImg(scope.row.reason_img)"
              >下载证据</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
      <forbidUserForm ref="formRef" @updateList="updateChange" />
    </el-dialog>
  </div>
</template>
